tsconfig path를 린트에 적용하기

tsconfig와 린트 삽질기

2024-01-11

블로그 개발 중 다음과 같이 상대경로로 가져오는 부분이 굉장히 지저분해지고 길어지는 경우가 있었다.

import * from '../../../../lib..'

별로 이쁘지도 않고, 지저분해 보여서 깔끔하게 하기 위해 절대 경로를 찾아 적용하기로 했다.

먼저, 다음과 같이 tsconfig을 수정했다. 이제 ./src로 시작하는 경로를 @/를 써서 읽을 수 있게 되었다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "next-sitemap.config.js"
  ],
  "exclude": ["node_modules"]
}

그러나 문제가 하나 있었다. ./src의 경로는 @를 써서 원활하게 가져왔지만, 프로젝트 루트에 lib이라는 폴더가 있었고, lib이라는 폴더에서 무언가를 가져오기 위해서는 상대경로가 길어졌다.

import * from '../../../../lib..'

절대 경로로 가져오기 위해, tsconfig에 paths를 여러개 적용해보았다. 다음과 같이 수정하였다. 이제 루트폴더에서 바로 가져오는 것은 ~를 , src폴더에서 가져오는 것은 @를 사용하면 된다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "next-sitemap.config.js"
  ],
  "exclude": ["node_modules"]
}

그러나 린트단에서 에러가 발생했다. eslint에서 'import/no-unresolved' 옵션에서 에러가 발생했다.

경로의 파일이 unresolved하는 일이 없도록 하는 옵션인 이다. 그래서 이름부터 import/no-unresolved다. 정확히는 import로 가져온 파일 혹은 모듈이 unresolved가 되지 않도록(no)하는 옵션이다.

해당 규칙을 off시킬 수도 있지만, 완벽한 해결책이 아닌 것 같아 더 찾아보았다.

tsconfig.json 파일과 ESLint 설정을 확인한 결과, 두 설정 사이에 경로 별칭(alias)가 일치하지 않았다. 나는 ESLint가 tsconfig.json의 경로 설정을 인식하길 원했지만, 추가적인 설정이 필요했다. ESLint 설정에 eslint-import-resolver-typescript 플러그인을 추가하면 EsLint가 tsconfig의 경로 별칭을 읽을 수 있다.

먼저 패키지를 설치하고 다음과 같이 린트 설정을 수정해 해결할 수 있었다.

 npm add -D eslint-import-resolver-typescript


  //eslint.json
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  },